<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">-->
    <meta name="format-detection" content="telephone=no" />
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/mychat/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="__STATIC__/mychat/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/mychat/fonts/iconfont.css?v=2016070717">
    <link rel="stylesheet" type="text/css" href="__STATIC__/mychat/css/chat_list.css">
    <script src="__STATIC__//mychat/js/jquery.min.js"></script>
    <script src="__STATIC__/mychat/js/dist/flexible/flexible_css.debug.js"></script>
    <script src="__STATIC__/mychat/js/dist/flexible/flexible.debug.js"></script>

</head>
<body>
<div class='fui-page-group'>
    <div class="fui-statusbar"></div>
<div class='fui-page chat-page'>
	<div class="fui-header">
	    <div class="title">消息列表</div>
	    <div class="fui-header-right"></div>
	</div>

	<div class="fui-content navbar chat-fui-content" style="padding-bottom: 2rem;">
		<!--<div class="chat-list flex" >-->
			<!--<div class="chat-img"  style="background-image: url('https://avatars2.githubusercontent.com/u/30819241?s=460&v=4')">-->
				<!--<span class="badge" style="top: -0.1rem;left: 80%;text-align: center;">1</span>-->
			<!--</div>-->
			<!--<div class="chat-info">-->
				<!--<p class="chat-merch flex">-->
					<!--<span class="title t-28">魔力克</span>-->
					<!--<span class="time">2017-12-14</span>-->
				<!--</p>-->
				<!--<p class="chat-text singleflow-ellipsis">你好</p>-->
			<!--</div>-->
		<!--</div>-->
	</div>
</div>
</div>
</body>
<script>
    var API_URL = "/index.php/api/mychat/";
    var from_id = {$from_id};
    //链接socket
    var ws = new WebSocket("ws://127.0.0.1:8282");
    ws.onmessage = function (e) {
        var msg = JSON.parse(e.data);
        switch (msg.type){
            case 'init':
                var bind = '{"type":"bind","from_id":"'+from_id+'"}';
                refreshList();
                //绑定聊天对象
                ws.send(bind);
                return;
            case 'text':
                //清空原始加载
                $(".chat-fui-content").empty();
                refreshList();
                return;
            case 'say_img':
                $(".chat-fui-content").empty();
                refreshList();
                return;
        }
    };
//    $(function(){
//        $.post(API_URL+"getList", {id:from_id},
//                function(res){
//                    $.each(res,function (index,value) {
//                        refreshDiv(value);
//                    })
//                },'json'
//        )
//
//
//    });

    //刷新列表数据
    function refreshList() {
        $.post(API_URL+"getList", {id:from_id},
            function(res){
                $.each(res,function (index,value) {
                    refreshDiv(value);
                })
            },'json'
        )
    }

    //刷新列表样式
    function refreshDiv(value) {
        var str = '';
        if (value.countNotread>0){
            str = '<span class="badge" style="top: -0.1rem;left: 80%;text-align: center;">'+value.countNotread+'</span>';
        }
        $(".chat-fui-content").append('<div class="chat-list flex" onclick=redirect("'+value.mychat_page +'")>' +
            '<div class="chat-img" style="background-image: url('+value.hear_url+')">' +
            str +
            '</div>' +
            '<div class="chat-info">' +
            '<p class="chat-merch flex"><span class="title t-28">'+value.username+'</span>' +
            '<span class="time">'+mydate(value.last_message.time)+'</span></p>'+
            '<p class="chat-text singleflow-ellipsis">'+value.last_message.content+'</p></div></div>')
    }

    /**跳转页面*/
    function redirect(url) {
		window.location.href = url;
    }
    /**根据时间戳格式化为日期形式*/
    function mydate(nS){
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    }

</script>

</html>
